<template>
	<view class="content ">
		<view class="detailC" :class="showLoading ? 'hidePage' : ''">
			<view class="detail-title flex-between boxS">
				<view class="title-text font36">
					<text>{{ userInfo.user_name }} 发起的申请</text>
					<text class="font28 co-yellow" v-if="showInfo.apply_info.status == 0">审批中</text>
					<text class="font28 co-yellow" v-if="showInfo.apply_info.status == 1">审批中</text>
					<text class="font28 co-green" v-if="showInfo.apply_info.status == 2">已通过</text>
					<text class="font28 co-red" v-if="showInfo.apply_info.status == 3">已拒绝</text>
					<text class="font28 co-grey" v-if="showInfo.apply_info.status == 4">已撤销</text>
				</view>
				<view class="title-img">
					<image src="/static/img/state_ico1.png" mode="widthFix"
						v-if="showInfo.apply_info.status == 0 || showInfo.apply_info.status == 1"></image>
					<image src="/static/img/state_ico2.png" mode="widthFix" v-if="showInfo.apply_info.status == 2">
					</image>
					<image src="/static/img/state_ico3.png" mode="widthFix" v-if="showInfo.apply_info.status == 3">
					</image>
					<image src="/static/img/state_ico4.png" mode="widthFix" v-if="showInfo.apply_info.status == 4">
					</image>
				</view>
			</view>

			<!-- 申请时间 -->
			<view class="detail-cont boxS">
				<view class="process-title"><text class="font30">申请时间</text></view>
				<view class="cont-num">
					<text class="font26">审批编号</text>
					<text class="font28">{{ showInfo.apply_info.order_no }}</text>
				</view>
				<view class="cont-type flex-between">
					<view class="type-item">
						<text class="font26">部门</text>
						<text class="font28">{{ userInfo.ou_name }}</text>
					</view>
					<view class="type-item">
						<text class="font26">申请类型</text>
						<text class="font28">{{ showInfo.apply_info.approve_type_text }}</text>
					</view>
				</view>
				<view class="cont-time font26" v-if="showInfo.apply_info.approve_type_text != '销假申请'">
					<block v-if="showInfo.apply_info.approve_type_text != '补卡'">
						<text class="time-day font28">累计天数：{{ showInfo.apply_info.time_length }}天</text>
						<text>开始时间：{{ showInfo.apply_info.start_time }}</text>
						<text>结束时间：{{ showInfo.apply_info.end_time || '' }}</text>
					</block>
					<block v-if="showInfo.apply_info.approve_type_text == '补卡'">
						<text>补卡时间：{{ showInfo.apply_info.start_time }}</text>
					</block>
				</view>
			</view>
			<!-- 申请详情 -->
			<view class="detail-cont boxS">
				<view class="process-title"><text class="font30">申请详情</text></view>
				<view class="detail-tip flex-center" v-if="showInfo.apply_info.successor_name">
					<text class="font26 mr20">接替人</text>
					<text class="font26 color">{{ showInfo.apply_info.successor_name }}</text>
				</view>
				<view class="detail-tip">
					<text class="font26">申请事由</text>
					<view class="detail-cent">
						<text>{{ showInfo.apply_info.reason }}</text>
					</view>
				</view>
				<view class="submit-info3">
					<text class="font26">上传图片</text>
					<view class="detail-cent flex-left">
						<view class="info3-item" v-for="(item, index) in showInfo.apply_info.image" :key="index">
							<image :src="item" mode="" @click="getPreviewImage(index)"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 出差 -->
			<view class="detail-cont boxS" v-if="showInfo.apply_info.approve_type_id == 3">
				<view class="process-title"><text class="font30">公差信息</text></view>
				<view class="detail-address">
					<text class="font26">出发城市</text>
					<text class="font28">{{ showInfo.apply_info.start_address }}</text>
				</view>
				<view class="detail-address">
					<text class="font26">目的城市</text>
					<text class="font28">{{ showInfo.apply_info.end_address }}</text>
				</view>
				<view class="detail-people">
					<text class="font26">同行人</text>
					<text class="font28">{{ showInfo.apply_info.number }}</text>
				</view>
				<view class="detail-tip">
					<text class="font26">公差备注</text>
					<view class="detail-cent">
						<text>{{ showInfo.apply_info.approve_type_text }}</text>
					</view>
				</view>
			</view>

			<!-- 流程 -->
			<!-- <view class="detail-process">
				<view class="process-title">
					<text class="font30">流程</text>
				</view>
				<view class="process-list">
					<view class="process-item flex-between">
						<view class="item-left flex-top">
							<view class="item-img">
								<image src="../../static/img/photo.png" mode="widthFix"></image>
							</view>
							<view class="item-text">
								<view class="item-name flex-left">
									<text class="font28">张勋烔</text>
									<text class="font24">行政部</text>
								</view>
								<view class="item-state font28">
									<text class="co-yellow">审批中</text>
									<text class="co-green">已同意</text>
									<text class="co-red">已拒绝</text>
								</view>
							</view>
						</view>
						<view class="item-right font24">
							2021-12-22 19:23
						</view>
					</view>
					<view class="process-item flex-between">
						<view class="item-left flex-top">
							<view class="item-img">
								<image src="../../static/img/photo.png" mode="widthFix"></image>
							</view>
							<view class="item-text">
								<view class="item-name flex-left">
									<text class="font28">张勋烔</text>
									<text class="font24">行政部</text>
								</view>
								<view class="item-state font28">
									<text class="co-yellow">审批中</text>
									<text class="co-green">已同意</text>
									<text class="co-red">已拒绝</text>
								</view>
							</view>
						</view>
						<view class="item-right font24">
							2021-12-22 19:23
						</view>
					</view>
					<view class="process-item flex-between">
						<view class="item-left flex-top">
							<view class="item-img">
								<image src="../../static/img/photo.png" mode="widthFix"></image>
							</view>
							<view class="item-text">
								<view class="item-name flex-left">
									<text class="font28">张勋烔</text>
									<text class="font24">行政部</text>
								</view>
								<view class="item-state font28">
									<text class="co-yellow">审批中</text>
									<text class="co-green">已同意</text>
									<text class="co-red">已拒绝</text>
								</view>
							</view>
						</view>
						<view class="item-right font24">
							2021-12-22 19:23
						</view>
					</view>
				</view>
			</view> -->

			<!-- 流程 -->
			<view class="detail-processN boxS">
				<view class="process-title"><text class="font30">审批流程</text></view>
				<view class="process-list">
					<block v-for="(iPrev, index1) in showInfo.processList" :key="index1">
						<view class="process-item flex-between">
							<view class="process-left flex-left">
								<view class="process-dian"></view>
								<view class="process-text">
									<text class="font28">{{ iPrev.flow_process.process_name }}</text>
									<block v-if="showInfo.apply_info.status != 4">
										<text v-if="iPrev.status == 0 && iPrev.isFirst"
											class="font24 co-yellow">审批中</text>
										<text
											v-if="iPrev.current_audit_item != '' && iPrev.current_audit_item.status == 1"
											class="font24 co-green">
											{{ iPrev.current_audit_item.member.user_name }} 已同意
										</text>
										<text
											v-if="iPrev.current_audit_item != '' && iPrev.current_audit_item.status == 2"
											class="font24 co-red">
											{{ iPrev.current_audit_item.member.user_name }} 已拒绝
										</text>
									</block>
									<text class="font24" v-else>{{ iPrev.members.length }}人协同审批</text>
								</view>
							</view>
							<view class="process-right">
								<view class="flex-right" :style="{ width: iPrev.width, 'min-width': '100%' }">
									<block v-for="(item, index2) in iPrev.members" :key="index2">
										<view class="process-people flex-right">
											<view class="process-add">+</view>
											<view class="people-cont">
												<image
													:src="!item.cover ? '../../static/img/photo.png' : item.cover"></image>
												<view class="process-name">
													<text class="font24">{{ item.user_name }}</text>
												</view>
											</view>
										</view>
									</block>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<!-- 站位 -->
			<view class="zanwei" v-if="showInfo.apply_info.status == 0 || showInfo.apply_info.status == 1"></view>

			<!-- 操作 -->
			<view class="detail-btn flex-between"
				v-if="showInfo.apply_info.status == 0 || showInfo.apply_info.status == 1" @click="dialogToggle()">
				<view class="btn1 font32">撤销</view>
			</view>
		</view>

		<!-- 提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'info'" title="系统提示" content="是否撤销申请？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<lzLoading :showloading="showLoading"></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				showInfo: {
					apply_info: {
						status: ''
					}
				},
				infoId: ''
			};
		},
		computed: {
			userInfo() {
				return uni.getStorageSync('USERINFO');
			}
		},
		onLoad(options) {
			this.infoId = options.id;
			Promise.all([this.getApplyInfo()]).then(t => {
				let sett = setTimeout(() => {
					this.showLoading = false;
				}, 500);
			});
		},
		methods: {
			//预览图片
			getPreviewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.showInfo.apply_info.image
				});
			},
			//获取申请详情
			getApplyInfo() {
				return new Promise((resolve, reject) => {
					this.$api.getApplyInfo({
							id: this.infoId
						},
						true,
						res => {
							let obj = res;
							// obj.apply_info.created_at = this.$util.formatTime(obj.apply_info.created_at,'Y-M-D h:m')
							//obj.apply_info.start_time = this.$util.formatTime(obj.apply_info.start_time,'Y-M-D h:m')
							//obj.apply_info.end_time = obj.apply_info.end_time?.this.$util.formatTime(obj.apply_info.end_time,'Y-M-D h:m')
							obj.apply_info.image = JSON.parse(obj.apply_info.image);
							let list = res.processList;
							for (let i in list) {
								list[i].width = list[i].members.length * 1 * 160 - 100 + 'rpx';
							}
							res.processList = list;
							//处理审判中的数据
							if (res.processList.length > 0) {
								for (let i = 0, l = res.processList.length; i < l; i++) {
									if (res.processList[i].current_audit_item == '') {
										res.processList[i].isFirst = true;
										break;
									}
								}
							}
							this.showInfo = res;
							resolve('success');
						}
					);
				});
			},

			// 打开对话框
			dialogToggle(id) {
				this.$refs.alertDialog.open();
			},
			//  关闭对话框
			dialogClose() {
				console.log('点击关闭');
			},
			// 确认
			dialogConfirm(val) {
				this.$api.revokeApply({
						id: this.infoId
					},
					true,
					res => {
						uni.showToast({
							title: '撤销成功'
						});
						this.updateList();
					}
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fafafa;

		.info3-item {
			width: 140rpx;
			height: 140rpx;
			border: 1rpx solid #e6e6e6;
			border-radius: 7rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detailC {
			transition: all 0.3s;

			.process-title {
				padding: 30rpx 0 0rpx 0;
				font-weight: bold;
				color: #454545;
			}

			.detail-title {
				padding: 10rpx 4%;
				background: #fff;

				.title-text {
					font-weight: bold;
					color: #333333;

					text {
						display: block;

						&:last-child {
							font-weight: 500;
							color: #787878;
							margin-top: 10rpx;
						}
					}
				}

				.title-img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
					}
				}
			}

			.detail-cont {
				margin-top: 30rpx;
				padding: 0 4%;
				padding-bottom: 25rpx;
				background: #fff;

				.cont-num {
					padding: 25rpx 0;

					text {
						display: block;
						color: #787878;

						&:last-child {
							color: #454545;
							margin-top: 10rpx;
						}
					}
				}

				.cont-type {
					padding: 25rpx 0;

					text {
						display: block;
						color: #787878;

						&:last-child {
							color: #454545;
							margin-top: 10rpx;
						}
					}

					.type-item {
						width: 50%;
						text-align: left;
					}
				}

				.cont-time {
					background: #e4f2ff;
					border-radius: 7rpx;
					padding: 30rpx;

					text {
						display: block;
						color: #787878;

						&:last-child {
							margin-top: 10rpx;
						}
					}

					.time-day {
						font-weight: bold;
						color: #008aff;
						margin-bottom: 20rpx;
					}
				}

				.detail-address,
				.detail-people {
					padding: 25rpx 0;

					text {
						display: block;
						color: #787878;

						&:last-child {
							color: #454545;
							margin-top: 10rpx;
						}
					}
				}

				.detail-tip {
					padding: 25rpx 0;
					padding-bottom: 0;

					.detail-cent {
						padding: 30rpx;
						background: #fafafa;
						border-radius: 7rpx;
						color: #454545;
						min-height: 100rpx;
						margin-top: 20rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.flex-center {
				display: flex;
				width: 100%;
				justify-content: start;
			}

			.mr20 {
				margin-right: 20rpx;
			}

			.color {
				color: #454545;
			}

			.detail-process {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				align-items: flex-start;
				padding-bottom: 150rpx;

				.process-item {
					padding-bottom: 80rpx;
					position: relative;

					&:after {
						position: absolute;
						top: 100rpx;
						left: 40rpx;
						content: '';
						width: 3rpx;
						height: 60rpx;
						background: #008aff;
						border-radius: 1rpx;
					}

					&:last-child {
						padding-bottom: 30rpx;

						&:after {
							background: none;
						}
					}

					.item-img {
						width: 88rpx;
						height: 88rpx;
						border-radius: 7rpx;
						margin-right: 30rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						font-weight: bold;
						color: #454545;

						text {
							&:last-child {
								font-weight: 500;
								color: #454545;
								margin-left: 20rpx;
							}
						}
					}

					.item-state {
						margin-top: 20rpx;
					}

					.item-right {
						color: #ababab;
					}
				}
			}

			.zanwei {
				padding-bottom: 150rpx;
			}

			.detail-processN {
				margin-top: 30rpx;
				background: #fff;

				align-items: flex-start;
				padding-bottom: 50rpx;

				.process-title {
					padding: 30rpx 4%;
					font-weight: bold;
					color: #454545;
				}

				.process-item {
					padding: 30rpx 4%;
					position: relative;
					border-bottom: 1rpx solid #eee;

					&:before {
						content: '';
						position: absolute;
						top: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008aff;
					}

					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008aff;
					}

					&:first-child {
						padding-top: 0;

						&:before {
							display: none;
						}
					}

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;

						&:after {
							display: none;
						}
					}

					.process-left {
						width: 30%;
						color: #454545;

						.process-dian {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #008aff;
							margin-right: 25rpx;
						}

						.process-text {
							text {
								display: block;

								&:last-child {
									color: #454545;
									margin-top: 7rpx;
								}
							}
						}
					}

					.process-right {
						width: 70%;
						overflow-x: scroll;
						overflow-y: hidden;
						text-align: right;

						image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 10rpx;
						}

						.process-name {
							line-height: 25rpx;
							text-align: center;
							color: #454545;
							margin-top: -5rpx;
						}

						.process-add {
							font-size: 40rpx;
							font-weight: blod;
							margin-top: -35rpx;
							padding: 0 15rpx;
							color: #454545;
						}

						.process-people {
							&:first-child {
								.process-add {
									display: none;
								}
							}
						}
					}
				}
			}

			.detail-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 92%;
				padding: 30rpx 4%;
				background: #fff;

				.btn1 {
					width: 100%;
					background: #008aff;
					border-radius: 44rpx;
					text-align: center;
					font-weight: bold;
					color: #ffffff;
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
